<template>
  <div class="home">
    <div class="home-head">
      <div class="home-top">
        <van-notice-bar
          scrollable
          background="#1777ff"
          color="#fff"
          :text="message"
        />
        <img
          src="../assets/image/icon_customer_service.png"
          width="15"
          height="15"
        />
        <img src="../assets/image/icon_message.png" width="15" height="15" />
      </div>
      <!-- 主题4个 -->
      <van-grid :column-num="4" :border="false">
        <van-grid-item
          v-for="(item, index) in mainList"
          :key="'a' + index"
          @click="itemClick(item)"
        >
          <img slot="icon" :src="item.img" alt="" width="31" height="31" />
          <p slot="text">
            {{ item.text }}
          </p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 8个功能 -->
    <div class="home-mian">
      <van-grid class="home-mian-item" :column-num="4" :border="false">
        <van-grid-item
          v-for="(item, index) in oneMainList"
          :key="'b' + index"
          @click="itemClick(item)"
        >
          <img slot="icon" :src="item.img" alt="" width="31" height="31" />
          <p slot="text">
            {{ item.text }}
          </p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- end 8个功能 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(item, index) in carouselList" :key="'c' + index">
        <img :src="item.imgurl" alt="" width="100%" height="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- end 轮播图 -->
    <div class="home-two">
      <p>热门推荐</p>
      <div class="home-two-d">
        <div
          class="home-two-item"
          v-for="(item, index) in twoMainList"
          :key="'c' + index"
          @click="twoItemClick(item)"
        >
          <img slot="icon" :src="item.img" alt="" width="99" height="103" />
        </div>
      </div>
    </div>
    <!-- end 热门推荐  -->
    <div class="home-three">
      <div class="home-three-top">
        <p>必看百科</p>
        <div>
          <span>更多</span>
          <img
            src="../assets/image/icon_right.png"
            alt=""
            width="9"
            height="9"
          />
        </div>
      </div>
      <div
        class="home-three-main"
        v-for="(item, index) in newsList"
        :key="'d' + index"
      >
        <img :src="item.lowSource" width="90" height="60" alt="" />
        <div class="home-three-main-div">
          <p class="home-three-main-pone">
            {{ item.title }}
          </p>
          <p class="home-three-main-ptwo">{{ item.createTime }}</p>
        </div>
      </div>
    </div>

    <tabbar />
  </div>
</template>
<script>
import Tabbar from "views/Tabbar.vue";
import {
  getApiHistoryMessageInfo,
  getApiCarouselInfo,
  getApiNewsCategory,
  getApiNewsInfo,
  getApiUserInfo,
} from "../network/ApiServe";
export default {
  components: { Tabbar },
  created() {
    this.city = localStorage.getItem("city");
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
  },
  data() {
    return {
      userInfo: {},
      newsInfo: {},
      mainList: [
        {
          text: "一键收款",
          img: require("../assets/image/icon_home_item01.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
        {
          text: "智能还款",
          img: require("../assets/image/icon_home_item02.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
        {
          text: "花呗收款",
          img: require("../assets/image/icon_home_item03.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
        {
          text: "空卡还款",
          img: require("../assets/image/icon_home_item04.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
      ],
      oneMainList: [
        {
          text: "助人账单",
          img: require("../assets/image/icon_home_item1.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
        {
          text: "申请办卡",
          img: require("../assets/image/icon_home_item2.png"),
          isName: false,
          isOpenH5: true,
          path: "",
        },
        {
          text: "贷款申请",
          img: require("../assets/image/icon_home_item3.png"),
          isName: false,
          isOpenH5: true,
          path: "",
        },
        {
          text: "积分兑换",
          img: require("../assets/image/icon_home_item4.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
        {
          text: "会员中心",
          img: require("../assets/image/icon_home_item5.png"),
          isName: true,
          isOpenH5: true,
          path: "",
        },
        {
          text: "用卡测评",
          img: require("../assets/image/icon_home_item6.png"),
          isName: false,
          isOpenH5: true,
          path: "",
        },
        {
          text: "账单查询",
          img: require("../assets/image/icon_home_item7.png"),
          isName: false,
          isOpenH5: false,
          path: "1",
        },
        {
          text: "直推奖金池",
          img: require("../assets/image/icon_home_item8.png"),
          isName: false,
          isOpenH5: true,
          path: "",
        },
      ],
      twoMainList: [
        {
          text: "一键收款",
          img: require("../assets/image/img_home_two1.png"),
        },
        {
          text: "智能还款",
          img: require("../assets/image/img_home_two2.png"),
        },
        {
          text: "花呗收款",
          img: require("../assets/image/img_home_two3.png"),
        },
      ],
      message: "",
      carouselList: [],
      classifiCation: "资讯",
      openH5Title: "功能跳转",
      newsList: [],
    };
  },
  mounted() {
    this.getHistoryMessageInfo();
    this.getCarouselInfo();
    this.getNewsCategory();
    this.getNewsInfo();
    this.getUserInfo();
  },
  methods: {
    itemClick(item) {
      // if (item.isName) {
      //   if (
      //     this.getRealnameStatus(this.userinfo.realnameStatus) != "审核通过"
      //   ) {
      //     this.$dialog
      //       .confirm({
      //         title: "实名认证",
      //         message: "您还未通过,请先实名认证",
      //       })
      //       .then(() => {
      //         this.$router.push("/realname");
      //       })
      //       .catch(() => {});
      //     return;
      //   }
      // }
      if (item.isOpenH5) {
        this.getOpenH5Title(item.text);
      } else {
        console.log("else 1");
      }
    },
    getOpenH5() {},
    oneItemClick(item) {
      console.log(item.text);
    },
    twoItemClick(item) {
      console.log(item.text);
    },
    getHistoryMessageInfo() {
      let _this = this;
      getApiHistoryMessageInfo(this.token)
        .then((res) => {
          console.log(res);
          if (res.resp_code === "000000") {
            res.result.content.filter((item, index) => {
              if (index < 1) {
                _this.message = item.content;
                console.log(item.content);
              }
            });
          }
        })
        .catch((err) => {
          console.log(err, "getApiHistoryMessageInfo");
        });
    },
    // 轮播图
    getCarouselInfo() {
      let _this = this;
      getApiCarouselInfo()
        .then((res) => {
          console.log(res, "getApiCarouselInfo");
          if (res.resp_code === "000000") {
            res.result.filter((item) => {
              _this.carouselList.push(item);
            });
            console.log(_this.carouselList);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 个人信息
    getUserInfo() {
      getApiUserInfo(this.token)
        .then((res) => {
          // console.log(res, "userInfo");
          if (res.resp_code === "000000") {
            this.userInfo = res.result;
            console.log(this.userInfo, "userInfo");
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },
    getNewsCategory() {
      getApiNewsCategory()
        .then((res) => {
          console.log(res, "getApiNewsCategory");
        })
        .catch((err) => {
          console.log(err, "getNewsCategory");
        });
    },
    // 資訊
    getNewsInfo() {
      let _this = this;
      getApiNewsInfo(_this.classifiCation)
        .then((res) => {
          console.log(res, "getApiNewsInfo");
          if (res.resp_code === "000000") {
            res.result.content.filter((item, index) => {
              if (index < 4) {
                _this.newsList.push(item);
              }
            });
            console.log(_this.newsList, "_this.newsList");
          }
        })
        .catch((err) => {
          console.log(err, "getApiNewsInfo");
        });
    },

    //实名状态
    getRealnameStatus(index) {
      let userShopStatus = "";
      switch (index) {
        case "0":
          userShopStatus = "审核中";
          break;
        case "1":
          userShopStatus = "审核通过";
          break;
        case "2":
          userShopStatus = "审核失败";
          break;
        case "3":
          userShopStatus = "未审核";
          break;
      }
      return userShopStatus;
    },
    addH5Params(url) {
      let str1 =
        url +
        "?phone=" +
        this.phone +
        "&token=" +
        this.token +
        "&brand_id=" +
        this.brandId +
        "&user_id=" +
        this.userId +
        "&ip=" +
        "application.mingchetech.com" +
        // "app20slb.mingchetech.com" +
        "&type=app";

      return str1;
    },
    // 跳转界面
    getOpen(title, url) {
      let _this = this;
      _this.$router.push({
        name: "OpenWeb",
        params: {
          title: title,
          url: _this.addH5Params(url),
        },
      });
    },
    // 功能跳转
    getOpenH5Title(title) {
      let _this = this;
      _this.newsInfo = {};
      console.log(title, "title");
      getApiNewsInfo(_this.openH5Title)
        .then((res) => {
          console.log(res, "功能跳转");
          if (res.resp_code === "000000") {
            if (res.result.content.length > 0) {
              res.result.content.filter((item) => {
                if (title === item.title) {
                  this.newsInfo = item;
                }
              });
              console.log(_this.newsInfo, "this.newsInfo111");
              console.log(_this.userInfo.grade, "grade");
              console.log(_this.newsInfo.onOff, "onOff");

              if (
                parseInt(_this.userInfo.grade) >= parseInt(_this.newsInfo.onOff)
              ) {
                _this.getOpen(_this.newsInfo.title, _this.newsInfo.content);
              } else if (_this.newsInfo != null) {
                _this.$toast("请到后台添加");
              } else {
                _this.$dialog
                  .confirm({
                    title: "提示",
                    message:
                      "查看需要" +
                      this.newsInfo.onOff +
                      "级用户及以上可见,请先前往升级",
                  })
                  .then(() => {
                    // _this.$tost("升级");
                    this.$router.push("mine");
                  })
                  .catch(() => {});
              }
            } else {
              _this.$dialog({
                title: "提示",
                message: "请联系客服人员,需要开发中...",
              });
            }
          }
        })
        .catch((err) => {
          console.log(err, "getOpenH5Title");
        });
    },
  },
};
</script>
<style scoped>
.home {
  background-color: #f7f7f7;

  padding-bottom: 60px;
}
.home-head {
  height: 161px;
  background-color: var(--app-primary-theme-color);
}
.home-top {
  margin-left: 15px;
  margin-right: 15px;
  padding-top: 33px;
  display: flex;
  align-items: center;
}
.home-top img {
  display: block;
  margin-left: 15px;
}
.home-top .van-notice-bar {
  flex: 1;
}
.van-grid {
  margin-left: 15px;
  margin-right: 15px;
}

.home-head >>> .van-grid-item__content {
  background-color: var(--app-primary-theme-color);
  font-size: 14px;
  color: #fff;
}
.van-grid-item p {
  margin-top: 5px;
}
.home-mian >>> .van-grid-item__content {
  background-color: #f7f7f7;
  font-size: 14px;
  color: #444;
}
/* 轮播图 */
.van-swipe {
  margin: 0 12px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.home-two {
  height: 173px;
  background-color: #fff;
  border-radius: 8px;
  margin: 10px 12px;
  padding-top: 15px;
  padding-bottom: 10px;
}
.home-two p {
  color: #444;
  font-size: 17px;
  margin-left: 9px;
  font-weight: 600;
}
.home-two-d {
  margin-top: 15px;
  display: flex;
  justify-content: space-evenly;
}
.home-two-d img {
  display: block;
}
.home-three {
  height: 398.5px;
  border-radius: 8px;
  background-color: #fff;
  margin: 10px 12px 0px 12px;
  padding: 15px 10px;
}
.home-three-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}
.home-three-top p {
  font-size: 17px;
  font-weight: 600;
  color: #444;
}
.home-three-top span {
  font-size: 13px;
  color: #999;
  margin-right: 6px;
}
.home-three-main {
  margin-bottom: 30px;
  display: flex;
}
.home-three-main img {
  display: block;
}
.home-three-main div {
  flex: 1;
  margin-left: 10.5px;
}
.home-three-main-pone {
  color: #444;
  font-weight: 600;
  line-height: 20px;
  font-size: 14px;
}
.home-three-main-ptwo {
  color: #999;
  font-size: 10px;
  text-align: right;
}
.home-three-main-div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>